<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            
        }
        #u1{
            width: 500px;
            border: 1px solid red;
            list-style: none;
            display: flex;
            /* 设置主轴的方向 */
            flex-direction: row;
            /* 设置沿辅轴方向换行 */
            flex-wrap: wrap;
            /* flex-flow: ;  wrap 和direction 的简写属性 */
            /* 元素沿着主轴的排列方向 center*/
            justify-content: space-around;/*空白分配到两侧*/
        }
        #u1 > li{
            margin-right: 5px;
            width: 200px;
            height: 100px;
            background-color: rosybrown;
            /* 使所有的子元素不收缩 */
            flex-shrink: 0;
        }
        #box1{
            margin-top: 20px;
            width: 800px;
            height: 600px;
            border: 5px solid black;
        }
        #box1>ul{
            height: 600px;
            display: flex;
            list-style: none;
            flex-flow: row wrap;
            /* 副轴方向上的对齐方式  */
            align-items:flex-end;
            /* 沿副轴两端对齐 空白位置的对齐方式 */
            align-content: space-around;
        }
        #box1 > ul >li{
            width: 200px;
            /* height: 200px; */
            line-height: 100%;
            font-size: 50px;
            text-align: center;
            flex-shrink: 0;
        }
        #box1 > ul >li:nth-child(1){
            /* 用来覆盖副轴上的align-items */
            align-self: flex-start;
            background-color: #123;
        }
        #box1 > ul >li:nth-child(2)
        {
            background-color: #3a1;
        }
        #box1 > ul >li:nth-child(3)
        {
            background-color: #1a1;
        }        
        #box1 > ul >li:nth-child(4)
        {
            background-color: #aa1;
        }        
        #box1 > ul >li:nth-child(5)
        {
            background-color: #3ab;
        }
        #box2 > ul{
            width: 400px;
            display: flex;
            border: 5px solid yellowgreen;
            list-style: none;

        }
        #box2 > ul >li{
            background-color: tomato;
            width: 200px;
            height: 200px;
            /* 弹性盒子的增长系数 */
            flex-grow: 1;
            /* 弹性元素的缩减系数 */
            flex-shrink: 1;

        }
        #box2 > ul >li:nth-child(2){
            flex-shrink: 2;
            background-color: violet;
            /* 设定元素在主轴上的大小 会覆盖原本的大小 */
            flex-basis: 150px;
            /* 设置元素的排列顺序  越大的越靠后*/
            order: 3;  
        }
    </style>
</head>
<body>
    <div>
        <ul id="u1">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="box1">
        <ul>
            <li>1</li>
            <li>2
                <div>2</div>
            </li>
            <li>3
                <div>3</div>
                <div>3</div>
            </li>
            <li>4</li>
            <li>5
                <div>5</div>
            </li>
        </ul>
    </div>
    <div id="box2">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>